<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/dist/css/pageguide.min.css" />
    <style type="text/css">
        body {
            font-family: Helvetica, Arial, sans-serif;
        }
        .wrapper {
            margin: 0 auto;
            width: 100%;
            max-width: 1025px;
        }
        .data-block {
            width: 100%;
            min-height: 700px;
        }
        .data-block img {
            width: 100%;
        }
        /*#titlePageGuide {*/
        /*    display: none;*/
        /*}*/
    </style>
</head>
<body>
    <div id="examplePlusWelcome">
        <div id="exampleContent">
            <div class="wrapper">
                <h1>Pageguide Example</h1>
                <div class="data-block first_element_to_target">
                    <h3>FIRST</h3>
                    <img src="/example/img/img1.jpg" alt="Brisbane"/>
                    <p><a href="http://www.flickr.com/photos/ipyo/4948872706/in/photostream/" target="_blank">Credit</a></p>
                </div>
                <div class="data-block" id="second_element_to_target">
                    <h3>SECOND</h3>
                    <img src="/example/img/img2.jpg" alt="Glen Canyon"/>
                    <p><a href="http://www.flickr.com/photos/alanenglish/7523729938/" target="_blank">Credit</a></p>
                </div>
                <div class="data-block third_element_to_target">
                    <div class="is_here">
                        <h3>THIRD</h3>
                        <img src="/example/img/img3.jpg" alt="London"/>
                        <p><a href="http://www.flickr.com/photos/fishyfish/200610788/" target="_blank">Credit</a></p>
                    </div>
                </div>
                <div class="data-block" id="fourth_element_to_target">
                    <h3>FOURTH</h3>
                    <img src="/example/img/img4.jpg" alt="Paros"/>
                    <p><a href="http://www.flickr.com/photos/97373666@N00/3123603304/in/photostream/" target="_blank">Credit</a></p>
                </div>
            </div>

            <!-- this set of pageguide steps will be displayed by default. -->
            <ul id="tlyPageGuide" data-tourtitle="check out these elements">
              <li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
                Here is the first item description. The number will appear to the left of the element.
              </li>
              <li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
                Here is the second item description. The number will appear to the right of the element.
              </li>
              <li class="tlypageguide_top" data-tourtarget=".third_element_to_target > div.is_here">
                Here is the third item description. The number will appear above the element.
              </li>
              <li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">
                Here is the fourth item description. The number will appear below the element.
              </li>
            </ul>

            <!-- this is a second set of pageguide steps. it is possible to have multiple
            pageguides per page, but you will need to initiate them separately, using the
            steps_element parameter to specify the selectors for each. -->
           <!-- <ul id="titlePageGuide" data-tourtitle="check out these titles">
              <li class="tlypageguide_top" data-tourtarget=".first_element_to_target h3">
                Here is the first title!
              </li>
              <li class="tlypageguide_top" data-tourtarget="#second_element_to_target h3">
                This fine specimen is the second title.
              </li>
              <li class="tlypageguide_top" data-tourtarget=".third_element_to_target h3">
                Third title reporting for duty.
              </li>
              <li class="tlypageguide_top" data-tourtarget="#fourth_element_to_target h3">
                #fourthtitle
              </li>
            </ul>-->
        </div>

        <div class="tlyPageGuideWelcome">
            <p>Welcome to my new page! pageguide is here to help you learn more.</p>
            <button class="tlypageguide_start">let's go</button>
            <button class="tlypageguide_ignore">not now</button>
            <button class="tlypageguide_dismiss">got it, thanks</button>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="/dist/js/pageguide.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            var pageguide = tl.pg.init();
        });
    </script>
</body>
</html>
